<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>主页面</title>
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        a{
            text-decoration: none;
        }
        .clearfix:after{
            content: "";
            display: block;
            height: 0px;
            clear: both;
            visibility: hidden;
        }
        .container{
            width: 1200px;
            margin:0 auto;
        }
        .header{
            width: 100%;
            height: 400px;
            margin: 10px 0px;
        }
        .left{
            float: left;
            width: 40%;
            height: 400px;
        }
        .right{
            float: right;
            width: 50%;
            height: 400px;
        }
        .sowingMap{
            width: 100%;
            height: 400px;
        }
        .bestSellers{
            width: 100%;
        }
        .bestSellers p{
            border-bottom: 2px solid blue;
            font-size: 20px;
            margin-bottom: 10px;
        }
        .bestSellers p .tag{
            margin-right: 50px;
        }
        .bestSellers p span:not([class="tag"]){
            margin:0 20px;
        }
        .bestSellersImg .imgDiv{
            float: left;
            width: 210px;
            height: 260px;
            margin: 10px;
        }
        .bestSellersImg .imgDiv img{

            width: 210px;
            height: 260px;
        }
        .bestSellersImg .imgDiv div{
            position: relative;
            width: 200px;
            top: -80px;
            color: white;
            margin: 0 auto;
        }
        .popularityIndex p,.excellentTravel p{
            text-align: center;
        }
        .popularityIndex p span:first-child ,.excellentTravel p span:first-child{
            font-size: 30px;
            color: black;
        }
        .popularityIndexImg .imgDiv,.excellentTravelImg .imgDiv{
            float: left;
            width: 210px;
            height: 260px;
            margin: 10px;
        }
        .popularityIndexImg .imgDiv img,.excellentTravelImg .imgDiv img{
            width: 210px;
            height: 260px;
        }
        .popularityIndexImg .imgDiv div,.excellentTravelImg .imgDiv div{
            position: relative;
            top: -60px;
            text-align: center;
            color: white;
        }
        .bestSellers,.popularityIndex,.excellentTravel{
            margin-bottom: 60px;
        }

        .footer{
            background-color: darkgray;
        }
        .footerTop ,.footerBottom{
            width: 1000px;
            margin: 10px auto;
        }
        .introduce{
            float: left;
            width: 48%;
            border-right: 1px solid gray;
        }
        .introduce p,.focus p{
            font-size: 20px;
            text-align: center;
            color: white;
            margin: 5px auto
        }
        .focus{
            float: left;
            width: 48%;
        }
        .footerBottom p{
            text-align: center;
            margin: 10px auto;
        }
        .footerBottom div{
            margin-left: 200px;
        }
    </style>
</head>
<body>
<%
    Object sceneryList = request.getAttribute("sceneryList");
    if(sceneryList==null){
        response.sendRedirect("SowMapServlet?param=2");
    }
%>
<%@include file="pageTitle.jsp"%>
<div class="container">
    <div class="header clearfix">
        <div class="left"></div>
        <div class="right">
            <c:forEach var="scenery" items="${sceneryList}">
                <a href="GetSceneryByIdServlet?sceId=${scenery.sceId}">
                    <img class="sowingMap" src="${scenery.pic}">
                </a>
            </c:forEach>
        </div>
    </div>
    <div class="bestSellers">
        <p>
            <span class="tag"><a href="">旅游度假</a></span>
            <span><a class="aTravel" href="javascript:void(0)" onclick="bestSeller(this)">当季热卖</a></span>
            <span><a class="aTravel" href="javascript:void(0)" onclick="domestic(this)">国内游</a></span>
            <span><a href="ToMainServlet">更多></a></span>
        </p>
        <div class="bestSellersImg clearfix">
            <c:forEach items="${sceneries}" var="scenery">
                <div class="imgDiv">
                    <a href="SceneryNewServlet?sceid=${scenery.sceId}">
                        <img class="imgDivImg" src="${scenery.pic}">
                    </a>
                    <div>
                        <span class="sceName">${scenery.sceName}|${scenery.context}</span>
                        <br>
                        <span class="ticket">￥${scenery.ticket}起</span>
                    </div>
                </div>
            </c:forEach>
        </div>

    </div>
    <div class="popularityIndex">
        <p>
            <span>人气指数</span>&nbsp;&nbsp;
            <span><a href="TravelServlet">更多></a></span>
        </p>
        <div class="popularityIndexImg clearfix">
            <c:forEach items="${sceList}" var="sce">
                <div class="imgDiv">
                    <img src="${sce.pic}">
                    <div>
                        <span>${sce.sceName}</span>&nbsp;&nbsp;&nbsp;
                        <span>人气数：${sce.collection}</span>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
    <div class="excellentTravel clearfix">
        <p>
            <span><a href="">精品游记</a></span>&nbsp;&nbsp;
            <span><a href="">更多></a></span>
        </p>

        <div class="excellentTravelImg">
            <c:forEach items="${travelList}" var="travel">
                <div class="imgDiv">
                    <img src="${travel.pic}">
                    <div>
                        <span>${travel.topic}</span><br>
                        <span>${travel.location}</span>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footerTop clearfix">
        <div class="introduce">
            <p>选飞鸟，请放心</p>
            <span>近10000名旅游顾问遍布全国近43235名旅游顾问遍布全国
				，为您提供旅游个性化服务。</span><br>
            <span>
				专业资质保障，累积服务600万人；真实游客点评，无后顾之忧。</span><br>
            <span>飞鸟旅游网致力于让您享受旅行本身的乐趣。</span>
        </div>
        <div class="focus">
            <div>
                <p>关注飞鸟</p>
                <img src="">
                <img src="">
            </div>
        </div>
    </div>
    <div class="footerBottom">
        <p>关于飞鸟|加入飞鸟|免责声明|联系飞鸟|建议与投诉</p>
        <div>
            <img src="./img/图片1.png">
            <img src="./img/图片2.png">
            <img src="./img/图片3.png">
            <img src="./img/图片4.png">
            <img src="./img/图片5.png">
        </div>
        <p>
            <span>飞鸟旅游网-中国在线旅游网站</span>
            <span>豫ICP备110120119号</span>
            <span>豫公网安备11491112315号</span>
        </p>
    </div>
</div>

<script type="text/javascript">
    var imgNodes = document.getElementsByClassName("sowingMap");
    var index = 0;
    function sowMap(){
        for (var i=0;i<imgNodes.length;i++){
            imgNodes[i].style.display="none";
        }
        if (index == imgNodes.length) {
            index = 0;
        }
        imgNodes[index].style.display="block";
        index++;
        setTimeout(sowMap,1000);
    }

    sowMap();
    var imgNode = document.getElementsByClassName("imgDivImg");
    var aNodes = document.getElementsByClassName("aTravel");
    var spanNode = document.getElementsByClassName("sceName");
    var spanNode2 = document.getElementsByClassName("ticket");
    function bestSeller(obj){

        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].style.color = "blue";
        }
        obj.style.color = "red";
        $.ajax(
            {
                url:"GetBestSellersServlet?param=2",
                type:"get",
                success: function (data) {
                    var sceJson = JSON.parse(data);
                    if(sceJson.errCode==200){
                        var sceneries = sceJson.data;
                        for(var i=0;i<sceneries.length;i++){
                            var scenery = sceneries[i];
                            imgNode[i].src = scenery.pic;
                            spanNode[i].innerHTML = scenery.sceName+"|"+scenery.context;
                            spanNode2[i].innerHTML = "￥"+scenery.ticket+"起";
                        }
                    }
                }
            }
        )
    }
    function domestic(obj){
        for (var i = 0; i < aNodes.length; i++) {
            aNodes[i].style.color = "blue";
        }
        obj.style.color = "red";
        $.ajax(
            {
                url:"GetBestSellersServlet?param=3",
                type:"get",
                success: function (data) {
                   var sceJson = JSON.parse(data);
                   if(sceJson.errCode==200){
                       var sceneries = sceJson.data;
                       for(var i=0;i<sceneries.length;i++){
                           var scenery = sceneries[i];
                            imgNode[i].src = scenery.pic;
                            spanNode[i].innerHTML = scenery.sceName+"|"+scenery.context;
                            spanNode2[i].innerHTML = "￥"+scenery.ticket+"起";
                       }
                   }
                }
            }
        )
    }

</script>
</body>
